<template>
  <div class="xd-faq-PoliticalNews-NewsHome p_10">
    <el-card class="m_t_b_5px news_panel" shadow="hover">
      <div slot="header">
        <div class="title">心理问答     
        <el-button type="primary" style="margin-left:620px;" @click="doAddQuestion">我要提问</el-button> 
      </div> 
      </div>
       <el-card class="box-card m_t_b_5px">
          <el-form ref="form" :model="formPolicy" label-width="80px">
            <el-form-item label="类别">
              <el-radio-group v-model="formPolicy.themeType" size="small" @change="handleRadioClick">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div style="font-size: 14px">
            <el-input
              v-model="form.questionTitle"
              clearable
              placeholder="搜索标题"
              style="width: 700px; margin:20px 10px; float: right"
              size="small"
            > <el-button slot="append" icon="el-icon-search"  @click="doSearch" ></el-button></el-input>
          </div>
        </el-card>

      <ul class="news_list item_flex_ul">
        <li v-for="p in newsList" :key="p.i_id"  @click="goNewsDetail(p.questionId)">
          <el-row style="width:100%;">
              <el-col :span="20" style="font-size: 12px">
                 <div>
                  <span
                    style="
                      font-weight: bold;
                      font-size:18px;
                      margin-right: 12px;
                    "
                    >{{p.questionTitle}}</span
                  >
                </div>
                <div><span style="font-size:14px;color:#a5a0a0;">{{formartContent(p.questionContent)}}</span></div>
                <div style="font-size:14px;">
                 <span style="margin-left:10px;"><i class="el-icon-chat-dot-square"></i> {{p.answerSum}} 回答</span>


                 <!-- <svg class="icon" style="width: 1em;height: 1em;vertical-align: text-top;fill: currentColor;overflow: hidden;margin-left:20px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3108"><path d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="3109"></path></svg>
                  0  -->
                </div>
              </el-col>
               <el-col :span="4">
                  <div style="color:red;text-align:right;">
                     <a>置顶</a>
                  </div>
                 <div style="text-align:right;margin-top:60px;font-size:14px;color:#a5a0a0;">
                  {{p.createTime.substring(0,10)}}
                  <!-- 20小时前 -->
                  </div>
               </el-col>
            </el-row>
        </li>
        <p v-if="!newsList.length" class="no-data">{{NO_DATA}}</p>
      </ul>
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="form.pageNumber"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="form.pageSize"
        :layout="PAGE_LAYOUT"
        :total="total"
      ></el-pagination>
    </el-card>

    <el-dialog :visible.sync="addQuestionVisible">
      <div slot="title">我要提问</div>
      <template>
        <div style="height: 65vh; overflow-y: auto; overflow-x: hidden">
          <el-form
            :model="noteForm"
            status-icon
            ref="noteForm"
            label-width="70px"
            label-position="left"
            class="study-note-form"
          >
           <el-form-item label="匿名">
                <el-checkbox v-model="noteForm.anonymity"></el-checkbox>
            </el-form-item> 
            <el-form-item label="类别">
              <el-radio-group v-model="noteForm.questionType" size="small">
                <el-radio-button
                  :label="item.dictValue"
                  v-for="item in themeTypeList"
                  :key="item.dictValue"
                  >{{ item.dictLabel }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>

            <el-form-item label="标题" prop="title">
              <el-input
                type="text"
                v-model="noteForm.title"
                autocomplete="off"
                placeholder="问题标题，5个字~25个字以内，必填"
              ></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                v-model="noteForm.content"
                autocomplete="off"
                maxlength="500"
                show-word-limit
                rows="14"
                placeholder="描述问题(40个字~1000字以内，必填)建议:
[年龄-性别]
[大致经过]
[内心感受]
[经历多长时间]
回答者们才能给出相对准确的解答和建议

收到满意的回答后，也记得给回答者点赞哦~"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitQuestion">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'FaqHome',
  data() {
    return {
      form: {
        pageNumber: 1,
        pageSize: 10,
        questionType:'',
        questionTitle:'', 
      },
      total: 0,
      newsList: [
        // {questionTitle:'36岁面临转行，不知道自己适合什么工作?',questionContent:'你好，我看了你的困惑，看到了你在这样的工作环境下，逐渐的没有活力，进而失去了工作的积极性.现在请跟随我的文字寻找你的答案吧:'},
        // {questionTitle:'36岁面临转行，不知道自己适合什么工作?',questionContent:'你好，我看了你的困惑，看到了你在这样的工作环境下，逐渐的没有活力，进而失去了工作的积极性.现在请跟随我的文字寻找你的答案吧:'},
        // {questionTitle:'36岁面临转行，不知道自己适合什么工作?',questionContent:'你好，我看了你的困惑，看到了你在这样的工作环境下，逐渐的没有活力，进而失去了工作的积极性.现在请跟随我的文字寻找你的答案吧:'}
      ],
      addQuestionVisible: false,
      noteForm: {
        title: "",
        content: "",
        questionType: "",
        anonymity: false
      },
      formPolicy: { themeType: ""},
      themeTypeList: [
        {
          dictValue: "",
          dictLabel: "全部类别",
        },
        // {
        //   dictValue: "1",
        //   dictLabel: "原生家庭",
        // },
        // {
        //   dictValue: "2",
        //   dictLabel: "抑郁",
        // }, 
        // {
        //   dictValue: "3",
        //   dictLabel: "自卑",
        // },
        // {
        //   dictValue: "4",
        //   dictLabel: "分手",
        // },
        // {
        //   dictValue: "5",
        //   dictLabel: "失眠",
        // },
        // {
        //   dictValue: "6",
        //   dictLabel: "焦虑",
        // },
      ],
    }
  },
  mounted() {
    this.getThemeList();
    this.getNews()
  },
  methods: {
     getThemeList() {
      utils.post('psychic/psychicQuestion/psychicQuestionTypeList', {}, res => {
        if (res.success) {
          this.themeTypeList = this.themeTypeList.concat(res.data.rows)
        }
      })
    },
    getNews() {
      utils.post('/psychic/psychicQuestion/list', this.form, res => {
        if (res.success) {
          this.total = res.data.total
          this.newsList = res.data.rows
        }
      })
    },
    sizeChange(val) {
      this.form.pageSize = val
      this.getNews()
    },
    pageChange(val) {
      this.form.pageNumber = val
      this.getNews()
    },
    goNewsDetail(id) {
      this.$router.push({ path: '/Cinziqao/Faq/Detail', query: { id: id, activeMenu: '/Cinziqao/Faq' } })
    },
    handleRadioClick(){
      this.form.questionType = this.formPolicy.themeType;
      this.getNews()
    },
     doAddQuestion() {
      this.addQuestionVisible = true;
    },
    submitQuestion() {
      if (!this.noteForm.title || !this.noteForm.content) {
        this.$message.error("请填写完整信息");
        return;
      }
      var param = {
        questionTitle: this.noteForm.title,
        questionContent: this.noteForm.content,
        questionType: this.noteForm.questionType,
        anonymity:this.noteForm.anonymity?1:0,
      };
      utils.post("/psychic/psychicQuestion/addQuestion", param, (res) => {
        if (res.success) {
          this.noteForm.title = "";
          this.noteForm.content = "";
          this.noteForm.questionType = "";
          this.noteForm.anonymity = false;
          this.addQuestionVisible = false;
          this.$message.success("提问成功");
          this.getNews();
        }
      });
    },
    doSearch(){
      this.form.questionType = this.formPolicy.themeType;
      this.getNews()
    },
       formartContent(value){
      var  content = value.replace(/<[^>]+>/g, "");
      return content.substring(0,178)+ (content.length>178?"...":"");
    }
  }
}
</script>
<style lang="less" >
.xd-faq-PoliticalNews-NewsHome {
  .news_panel {
    ul.news_list li {
      border-bottom: solid 1px #dcdfe6;
      padding-bottom: 5px;
    }
  }
  .el-dialog{
    width: 70%;
  }
}
</style>
